<template>
    <div class="read_container">
        <div class="lunbotu">
            <img src="../../images/about/lunboList1.png" alt="">
        </div>

        <div class="readInfo">
            <ol class="breadcrumb">
                <li><a href="#"><img src="../../images/homeIcon.png"/>首页</a></li>
                <li class="active">{{ msg }}</li>
            </ol>
            <ul class="navLi">
                <li :class="{ active:item.flag }" v-for="item in tabList" :key="item.id" @click="changeTab(item.id)">
                    <a href="#">{{ item.text }}</a>
                </li>
            </ul>

            <div class="readList">
                <div class="listInfo" v-for="item in dataList" :key="item.id">
                    <div class="img">
                        <img :src="$store.state.httpUrl + item.imgUrl" alt="">
                    </div>
                    <div class="imgIfo">
                        <p> {{ item.title }} <span>{{ item.gtmModified  | formatDate }} </span></p>
                        <div class="middle">
                            <router-link :to="{ name:pathUrl , params:{ id : item.id } }" v-html="item.content"></router-link>
                        </div>
                        <div class="bottom">
                            <a href="#">{{ item.categories }}</a>
                            <router-link class="right" :to="{ name:pathUrl , params:{ id : item.id } }" tag="span">阅读全文</router-link>
                        </div>
                    </div>
                </div>
            </div>
             <nav aria-label="...">
                <ul class="pagination">
                    <li :class="{ disabled: deleFlag }">
                        <span @click="delePage">
                            <span aria-hidden="true">&laquo;</span>
                        </span>
                    </li>
                    <li :class="{active:value == pageIndex}" v-for="(value,index) in pageList" @click="changePage(value)" :key="index">
                        <span>{{ value }} <span class="sr-only">(current)</span></span>
                    </li>
                    <li :class="{ disabled: addFlag }">
                        <span @click="addPage">
                            <span aria-hidden="true">&raquo;</span>
                        </span>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>


<script>
import dateFormat from '../../js/Date'
export default {
    data(){
        return {
            msg:"",
            msgId:"",
            dataList:[],
            tabList: [
                {text:'全部电台',flag:true,id:'a'},
                {text:'答题技巧',flag:false,id:'1'},
                {text:'政策解读',flag:false,id:'2'},
                {text:'经验分享',flag:false,id:'3'},
                {text:'行业动态',flag:false,id:'4'},
            ],
            pageIndex:1,
            pageList:[],
            addFlag:false,
            deleFlag:true,
            pathUrl:'',
        }
    },
    created(){
        if(this.$route.path == "/read"){
            this.msg = "阅读";
            this.msgId = 2;
            this.pathUrl = 'readIfo';
        }else{
            this.msg = "资讯";
            this.msgId = 1;
            this.pathUrl = 'zixunIfo';
        }
        this.zixunListData();
    },
    methods:{
        changeTab(value){
            this.tabList.forEach(function(el,index){
                if(index == value){
                    el.flag = true;
                }else{
                    el.flag = false;
                }
            });
            this.pageIndex = 1;
            this.addFlag = false;
            this.deleFlag = true;
            this.zixunListData(value);
        },
        addPage(){
            if(this.addFlag){
                return;
            }
            this.pageIndex += 1;
            if(this.pageIndex > 1){
                this.deleFlag = false;
            }
            if(this.pageIndex === this.pageList.length){
                this.addFlag = true;
            }
            this.zixunListData();
        },
        changePage(value){
            this.pageIndex = value;
            if(this.pageIndex === 1){
                this.deleFlag = true;
                this.addFlag = false;
            }
            if(this.pageIndex  === this.pageList.length){
                this.deleFlag = false;
                this.addFlag = true;
            }
            this.zixunListData();
        },
        delePage(){
            if(this.deleFlag){
                return;
            }
            this.pageIndex -= 1;
            if(this.pageIndex === 1){
                this.deleFlag = true;
            }
            if(this.pageIndex < this.pageList.length){
                this.addFlag = false;
            }
            this.zixunListData();
        },
        zixunListData(value){
            var data = {
                pageSize:6, 
                pageNum:this.pageIndex,
                categories:this.msgId
            }
            if(value && value !== 'a'){
                data.type = value;
            }
            this.$http.post(this.$store.state.httpUrl + '/index/article/conPage', data ).then((response) => {
                // success callback
                console.log(response)
                if(response.status == 200){
                    this.dataList = response.body.data.list;
                    this.pageList = response.body.data.navigatepageNums;
                    if(this.pageList.length === 1){
                        this.addFlag = true;
                    }
                }
            }, (response) => {
                // error callback
            });
        }
    },
    watch:{
        "$route":function(to,from){
            //from 对象中包含当前地址
            //to 对象中包含目标地址
            //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
            if(to.path == "/read"){
                this.msg = "阅读";
                this.msgId = 2;
                this.pathUrl = 'readIfo';
            }else{
                this.msg = "资讯";
                this.msgId = 1;
                this.pathUrl = 'zixunIfo';
            }
            this.pageIndex = 1;
            this.zixunListData();
        }
    },
    filters: {
         formatDate(time) {
             let date = new Date(time);
             return dateFormat.formatDate(date, "yyyy / MM / dd");
         }
     },
}
</script>



<style lang="less" scoped>
.read_container {

    .lunbotu img {
        width:100%;
        max-height: 350px;
    }

    .readInfo {
        width:1000px;
        margin:0 auto;

        .breadcrumb {
            background-color: #fff;
            margin: 10px 0 8px;
            padding: 8px 0;
            font-size: 12px;

            img {
                height: 15px;
                width: auto;
                margin-top: -3px;
                margin-right: 5px;
            }
        }

        .navLi {
            overflow: hidden;
            
            li {
                float:left;
                margin-right: 30px;
            }

            a {
                padding: 3px 12px;
                display: block;
                font-size: 12px;
            }

            li.active a, a:hover {
                background-color: rgba(239,177,11,1);
                color:#fff;
            }
        }

        .readList {
            margin-top: 28px;
            margin-bottom: 30px;

            .listInfo:hover {
                box-shadow: 0 0 20px #c0c0c0;
            }
            .listInfo {
                margin-top:10px;
                overflow: hidden;
                border-radius: 12px;
                height:161px;

                .img {
                    float:left;
                    margin-right: 25px;
                }
                img {
                    height:161px;
                }
                .imgIfo {
                    width:100%;
                    height:100%;
                    position: relative;

                    p {
                        line-height: 22px;
                        padding: 5px 15px 20px;
                        font-size: 16px;
                        position:relative;

                        span {
                            font-size: 10px;
                            float:right;
                        }
                    }

                    div.middle {
                        height: 90px;

                        a {
                            text-decoration: none;
                            color:#a5a5a5;
                            font-size: 12px;
                            padding: 0 15px 13px;
                            display: block;
                        }
                    }

                    div.bottom {
                        font-size: 10px;
                        color:#555;

                        span.right {
                            position: absolute;
                            right: 15px;
                            bottom: 5px;
                            padding: 0 26px;
                            display: block;
                            height: 26px;
                            font-size: 12px;
                            line-height: 26px;
                            border-radius: 15px;
                            background-color: #efb10b;
                            color: #fff;
                            cursor: pointer;
                        }
                    }

                }
            }
            .listInfo + .listInfo {
                margin-top:30px;
            } 
        }
    }
    nav {
        text-align: center;

        li {

            cursor:pointer;
        }
    }
}
</style>
